<script setup>
import { getTimeStr } from '@/utils/transIUtils'
import { useRouter, useRoute } from 'vue-router'
import LikeLineIcon from '@/components/svgComponents/LikeLineIcon.vue'
import PostListItemImage from '@/components/PostListItemImage.vue'
import { View, Star, ChatRound } from '@element-plus/icons-vue'

const props = defineProps({
  data: Object, 
  isNoTops: Boolean,
  isEdit: Boolean,
})

const router = useRouter()
const route = useRoute()

const handleClick = () => {
  // 如果路径有post,则去掉post及其后面的内容，否则直接添加post/id
  const path = route.path.replace(/\/post.*/, '')

  // router.push(`${path}/post/${props.data.id}`)
  router.push(`/home/post/${props.data.id}`)
}

const handleEdit = () => {
  router.push(`/editTopic/${props.data.id}?type=${props.data.type}`)
}
</script>

<template>
  <div class="post-list-item-card border-b-1 border-solid border-[--line-1] py-2">
    <div
      @click="handleClick()"
      class="bg-[--fill-0] rounded-xl hover:shadow-lg hover:-translate-y-1 hover:bg-[--fill-1] cursor-pointer transition-all p-4 w-full flex gap-4 items-start">
      <PostListItemImage :type="data.type" :media="data.media" class="w-[90px] h-[90px] rounded-lg object-cover flex-shrink-0" />
      <section class="flex flex-col gap-2 flex-1 min-w-0">
        <div class="flex items-center gap-2 mb-1">
          <img :src="data.userInfo?.avatar" class="w-8 h-8 rounded-full object-cover border border-blue-100 shadow-sm" />
          <span class="font-medium text-blue-900 text-base">{{ data.userInfo?.username }}</span>
          <el-tag v-if="data.discussTitle" size="small" type="info" class="ml-2">{{ data.discussTitle }}</el-tag>
          <span class="flex-1"></span>
          <div v-if="data.postQuality==1" class="premium-tag ml-2">
            <span class="premium-text">精华帖</span>
          </div>
          <el-button v-if="isEdit" type="primary" size="small" class="ml-2" @click.stop="handleEdit">编辑</el-button>
          <span class="text-xs text-gray-400 whitespace-nowrap">{{ getTimeStr(data.createTime) }}</span>
        </div>
        <div class="flex items-center gap-2 mb-1">
          <div class="text-lg font-bold text-slate-900 line-clamp-1">{{ data.title }}</div>
          <div v-if="data.postTop > 0 && !isNoTops" class="bg-[#2e5592] rounded-full px-2 py-1 text-xs text-[#fff] flex h-fit whitespace-nowrap ml-2">置顶</div>
        </div>
        <div v-if="data.type !== 3" class="text-sm text-gray-700 line-clamp-3 mb-1" v-html="data.content"></div>
        <div class="flex items-center gap-6 text-xs text-slate-500 mt-1">
          <div class="flex items-center gap-1">
            <el-icon><View /></el-icon>
            <span>{{ data.readCount }}</span>
          </div>
          <div class="flex items-center gap-1">
            <LikeLineIcon  class="w-3" color="gray" />
            <span>{{ data.collectionCount }}</span>
          </div>
          <div class="flex items-center gap-1">
            <el-icon><ChatRound /></el-icon>

            <span>{{ data.commentCount }}</span>
          </div>
          <div class="flex items-center gap-1">
            <el-icon><Star /></el-icon>
            <span>{{ data.fabulousCount }}</span>
          </div>
          <el-tag v-if="data.topicName" size="small" type="primary" class="ml-auto">{{ data.topicName }}</el-tag>
        </div>
      </section>
    </div>
  </div>
</template>

<style scoped lang="scss">
.post-list-item-card {
  background: #fff;
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px 0 rgba(56,112,255,0.04);
  transition: box-shadow 0.18s, transform 0.14s;
}
.post-list-item-card:hover {
  box-shadow: 0 8px 28px 0 rgba(56,112,255,0.13);
  background: #fafdff;
}

.premium-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  border-radius: 12px;
  border: 1px solid #e6c200;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
  transform: translateZ(0);
  transition: all 0.3s ease;
}

.premium-tag:hover {
  transform: translateY(-1px) translateZ(0);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.premium-tag::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
  border-radius: 12px;
  z-index: -1;
  opacity: 0.7;
  filter: blur(1px);
}

.premium-text {
  font-size: 11px;
  font-weight: 600;
  color: #8b4513;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
  line-height: 1;
}
</style>
